<template>
  <div class="app-container">
    <div class="flex flex-col mb-4">
      <div class="flex justify-between">
        <p class="text-xl mb-2">筛选查询</p>
        <div>
          <el-button
            class="marginRB10"
            icon="el-icon-search"
            type="primary"
            @click="getList"
          >搜索
          </el-button>
          <el-button class="marginRB10" @click="resetSubmit">重置</el-button>
        </div>
      </div>
      <div class="flex flex-wrap">
        <div>
          <span>房间ID：</span>
          <el-input
            v-model="listQuery.room_id"
            class="marginRB10"
            clearable
            placeholder="请输入房间ID"
            style="width: 200px"
          ></el-input>
        </div>
        <div>
          <span>房间名称：</span>
          <el-input
            v-model="listQuery.room_name"
            class="marginRB10"
            clearable
            placeholder="请输入房间名称"
            style="width: 200px"
          ></el-input>
        </div>
        <div>
          <span>获胜房间：</span>
          <el-select v-model.number="listQuery.winner_room"
                      class="filter-item marginRB10"
                      filterable
                      placeholder="请选择获胜房间"
                      style="width: 200px"
          >
            <el-option
              v-for="item in selectList"
              :key="item.key"
              :label="item.lab"
              :value="item.key"
            ></el-option>
          </el-select>
        </div>
        <div>
          <span>开启对决时间：</span>
          <el-date-picker
            v-model="times"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
			value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </div>
        
      </div>
    </div>

    <p class="text-xl mb-4">房间列表</p>
    <el-table
      ref="dataList"
      :data="menuList"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      border
      row-key="id"
      style="margin-bottom: 20px"
    >
	  <!-- :index="indexMethod" type="index" 序号 -->
      <el-table-column width="150" prop="id" label="序号" sortable></el-table-column>
      <el-table-column label="红方房间ID" prop="room_code"></el-table-column>
      <el-table-column label="红方房间名称" prop="room_name"></el-table-column>
      <el-table-column label="蓝方房间ID" prop="match_room_code"></el-table-column>
      <el-table-column label="蓝方房间名称" prop="match_room_name"></el-table-column>
      <el-table-column label="红方房间PK值" prop="score"></el-table-column>
      <el-table-column label="蓝方房间PK值" prop="match_score" width="150"></el-table-column>
      <el-table-column label="开启对决时间" prop="start_at" sortable></el-table-column>
      <el-table-column label="获胜房间" prop="winner_name">
		<template slot-scope="scope">
          <span v-if="scope.row.match_score > scope.row.score">蓝方房间</span>
          <span v-if="scope.row.match_score < scope.row.score">红方房间</span>
          <span v-if="scope.row.match_score === scope.row.score">平局</span>
        </template>
	  </el-table-column>
      <el-table-column label="对决流水" prop="coin" sortable></el-table-column>
      <el-table-column label="操作" min-width="180">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="handleCheck(scope.row)"
          >详情
          </el-button>
          <el-button size="default" type="text"
                     @click="handleExpenseList(scope.row)"
          >流水明细
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <cus-pagination
      v-show="total > 0"
      :limit.sync="listQuery.perPage"
      :page.sync="listQuery.page"
      :total="total"
      @pagination="getList"
    />

    <!-- 详情弹窗 -->
    <el-dialog
		title="房间对决详情"
		:visible.sync="visibleDialog"
		width="30%"
		@close="handleCloseDialog">
		<el-form :model="form" ref="dataForm" label-width="120px" :inline="false" size="normal">
			<h3>对战信息</h3>
			<el-form-item label="对决时长" prop="second">
				<el-input v-model="form.second" disabled>
					<template slot="append">分钟</template>
				</el-input>
			</el-form-item>
			<el-form-item label="对决开启时间" prop="start_at">
				<el-input v-model="form.start_at" disabled></el-input>
			</el-form-item>
			<el-form-item label="获胜房间" prop="winner_name">
				<el-input v-if="form.match_score === form.score" placeholder="平局" disabled></el-input>
				<el-input v-else v-model="form.winner_name" disabled></el-input>
			</el-form-item>
			<el-form-item label="对决流水" prop="coin">
				<el-input v-model="form.coin" disabled></el-input>
			</el-form-item>

			<h3>红方房间</h3>
			<el-form-item label="房间名称" prop="room_name">
				<el-input v-model="form.room_name" disabled></el-input>
			</el-form-item>
			<el-form-item label="房间ID" prop="room_code">
				<el-input v-model="form.room_code" disabled></el-input>
			</el-form-item>
			<el-form-item label="房间封面" prop="cover_picture">
				<el-image class="coverPicture" :src="form.cover_picture" fit="fill">
					<div slot="error" class="image-slot">
						<i class="el-icon-picture-outline"></i>
					</div>
				</el-image>
			</el-form-item>
			<el-form-item label="PK值" prop="score">
				<el-input v-model="form.score" disabled></el-input>
			</el-form-item>

			<h3>蓝方房间</h3>
			<el-form-item label="房间名称" prop="match_room_name">
				<el-input v-model="form.match_room_name" disabled></el-input>
			</el-form-item>
			<el-form-item label="房间ID" prop="match_room_code">
				<el-input v-model="form.match_room_code" disabled></el-input>
			</el-form-item>
			<el-form-item label="房间封面" prop="match_room_cover_picture">
				<el-image class="coverPicture" :src="form.match_room_cover_picture" fit="fill" :lazy="true">
					<div slot="error" class="image-slot">
						<i class="el-icon-picture-outline"></i>
					</div>
				</el-image>
			</el-form-item>
			<el-form-item label="PK值" prop="match_score">
				<el-input v-model="form.match_score" disabled></el-input>
			</el-form-item>
		</el-form>
		
		<span slot="footer">
			<el-button @click="visibleDialog = false">返回</el-button>
			<el-button type="primary" @click="visibleDialog = false">确定</el-button>
		</span>
    </el-dialog>
    
  </div>
</template>

<script>
import { listData } from '@/api/pk/room'

export default {
	data() {
		return {
			form: {},
			visibleDialog: false,
			times: '',
			listLoading: true,
			total: 0,
			listQuery: {
				page: 1,
				perPage: 10,
				type: "default"
			},
			selectList: [
				{ key: undefined, lab: '全部房间' },
				{ key: 1, lab: '红方房间 ' },
				{ key: 2, lab: '蓝方房间' }
			],
			menuList: [
				{id:1}
			]
		}
	},
	created() {
		this.getList()
	},
	methods: {
		indexMethod(index) {
			return (this.listQuery.page - 1) * this.listQuery.perPage + index + 1
		},
		getList() {
			this.listLoading = true
			if (this.times && this.times.length > 0) {
				this.listQuery.start = this.times[0]
				this.listQuery.end = this.times[1]
			}else {
				this.listQuery.start = undefined
				this.listQuery.end = undefined
			}
			for (let key in this.listQuery) {
				this.listQuery[key] = this.listQuery[key] === '' ? undefined : this.listQuery[key]
			}
			listData(this.listQuery).then(({ data }) => {
				data.data.forEach(element => {
					element.winner_name = element.winner_room_id === element.room_id ? element.room_name : element.match_room_name
				});
				this.menuList = data.data
				this.total = data.total
				this.listLoading = false
			})
		},
		handleExpenseList(row) {
			this.$router.push({
				path: 'expenseList',
				query: {
					row: row.id
				}
			})
		},
		handleCheck(row) {
			this.visibleDialog = true
			// row.winner_name = row.winner_room_id === row.room_id ? row.room_name : row.match_room_name
			row.second = row.second / 60
			this.form = row
		},
		resetSubmit() {
			this.listQuery = {
				page: 1,
				perPage: 10,
				type: "default"
			}
			this.times = ''
			this.getList()
		},
		// 监听dialog关闭时的处理事件
		handleCloseDialog() {
			if (this.$refs['dataForm']) {
				this.$refs['dataForm'].clearValidate() // 清除整个表单的校验
				this.form = {}
			}
		}
	}
}
</script>
<style lang="scss" scoped>
	.coverPicture{
		width: 200px;
	}
</style>